import { defineComponent, ref } from "vue";
import { ListPropsData } from "./types";
import "./index.less";
import { getSize } from "@/command/apiTool";
import clsx from "clsx";
import ListPage from "./Components/ListPage";
import List from "./Components/List";
import Empty from "@/components/Empty";

export default defineComponent({
  name: "list-view",
  props: ListPropsData,
  setup(props, { expose }) {
    const pageRef = ref();
    const listRef = ref();

    const renderList = (data: any[]) => {
      return data.map((e: any, i: number) => (
        <div
          style={{ minHeight: getSize(props.itemHeight) }}
          class="flex items-center"
        >
          {props.renderItem(e, i)}
        </div>
      ));
    };
    const renderListType = () => {
      return (
        <List
          ref={listRef}
          url={props.url}
          params={props.params}
          renderList={renderList}
          renderEmpty={renderEmpty}
        />
      );
    };
    const renderEmpty = () => {
      return <Empty bottomText={props.bottomText} />;
    };
    const renderPageType = () => {
      return (
        <ListPage
          ref={pageRef}
          url={props.url}
          params={props.params}
          renderEmpty={renderEmpty}
          renderList={renderList}
        />
      );
    };
    const renderCustom = () => {
      if (props.data.length == 0) return renderEmpty();
      return <div class="list-custom-type">{renderList(props.data)}</div>;
    };
    const renderView = () => {
      switch (props.type) {
        case "list":
          return renderListType();
        case "page":
          return renderPageType();
        case "custom":
          return renderCustom();
      }
    };
    const renderMain = () => {
      const className = clsx({
        [props.themeStyle]: true,
      });
      return (
        <div class={[className]} style={{ backgroundColor: "inherit" }}>
          {renderView()}
        </div>
      );
    };

    const getExpose = () => {
      if (props.type == "list") {
        return listRef.value;
      } else if (props.type == "page") {
        return pageRef.value;
      }
    };
    expose({
      reset: () => {
        getExpose().reset();
      },
    });
    return () => {
      return renderMain();
    };
  },
});
